import React, { useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
import TouchableOpacity from '../touchable-opacity';

import './index.less';

export default function Alert({
    alertTip,
    alertStatus,
    closeAlert,
}: {
    alertTip: string;
    alertStatus: boolean;
    closeAlert: () => void;
}) {
    const nodeRef = useRef(null);

    return (
        <CSSTransition nodeRef={nodeRef} in={alertStatus} classNames='alert' unmountOnExit timeout={200}>
            <div ref={nodeRef} className='alert-context'>
                <div className='alert-content-detail'>{alertTip}</div>
                <TouchableOpacity className='confirm-btn' onClick={closeAlert} />
            </div>
        </CSSTransition>
    );
}
